<template>
  <el-container>
    <el-header>
        欢迎：{{this.$store.getters.userName}}
    </el-header>
    <el-container>
      <div>
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;" size="mini">
          <el-radio-button :label="false">展开</el-radio-button>
          <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse">
          <router-link to="online" tag="span">
            <el-menu-item index="1">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">用户</span>
            </template>
            <router-link to="userInfo" tag="span">
              <el-menu-item index="2-1">用户信息</el-menu-item>
            </router-link>
            <router-link to="userList" tag="span">
              <el-menu-item index="2-2" v-if="this.$store.getters.isShow" >用户列表</el-menu-item>
            </router-link>
            <router-link to="userLog" tag="span">
              <el-menu-item index="2-3">操作日志</el-menu-item>
            </router-link>
            <router-link to="gmOperation" tag="span">
              <el-menu-item index="2-4" v-if="this.$store.getters.isShow" >GM 操作</el-menu-item>
            </router-link>
            <router-link to="newAdmin" tag="span">
              <el-menu-item v-if="this.$store.getters.isShow" index="2-5">管理申请</el-menu-item>
            </router-link>
            <router-link to="record" tag="span">
              <el-menu-item v-if="this.$store.getters.isShow" index="2-6">系统回放</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="3" v-if="this.$store.getters.isShow">
            <template slot="title">
              <i class="el-icon-view"></i>
              <span slot="title">场景</span>
            </template>
            <router-link  to="wzjh" tag="span">
              <el-menu-item index="3-1">万人</el-menu-item>
            </router-link>
            <router-link to="lh" tag="span">
              <el-menu-item index="3-2">龙虎</el-menu-item>
            </router-link>
            <router-link  to="niuniu" tag="span">
              <el-menu-item index="3-3">牛牛</el-menu-item>
            </router-link>
            <router-link to="jdssl" tag="span">
              <el-menu-item index="3-4">彩票</el-menu-item>
            </router-link>
            <router-link  to="dsf" tag="span">
              <el-menu-item index="3-5">三风</el-menu-item>
            </router-link>
            <router-link  to="ebg" tag="span">
              <el-menu-item index="3-6">二八</el-menu-item>
            </router-link>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span slot="title">统计</span>
            </template>
            <router-link to="systemStatistics" tag="span">
              <el-menu-item  v-if="this.$store.getters.isShow" index="4-1">系统</el-menu-item>
            </router-link>
            <router-link  v-if="this.$store.getters.isShow" to="serviceChargeStatistics" tag="span">
              <el-menu-item  v-if="this.$store.getters.isShow" index="4-2">手续</el-menu-item>
            </router-link>
            <router-link to="registerStatistics" tag="span">
              <el-menu-item index="4-3">注册</el-menu-item>
            </router-link>
            <router-link to="topUpStatistics" tag="span">
              <el-menu-item index="4-4">充值</el-menu-item>
            </router-link>
            <router-link  v-if="this.$store.getters.isShow" to="topUpDetailStatistics" tag="span">
              <el-menu-item index="4-5">账单</el-menu-item>
            </router-link>
          </el-submenu>

          <el-submenu index="5" v-if="this.$store.getters.isShow">
            <template slot="title">
              <i class="el-icon-folder-opened"></i>
              <span slot="title">资源</span>
            </template>
            <router-link to="resupload" tag="span">
              <el-menu-item index="5-1">上传</el-menu-item>
            </router-link>
            <router-link to="resdown" tag="span">
              <el-menu-item index="5-2">下载</el-menu-item>
            </router-link>
          </el-submenu>
          <el-submenu index="6" v-if="this.$store.getters.isShow">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span slot="title">设置</span>
            </template>
            <router-link to="noticeboard" tag="span">
              <el-menu-item index="6-1">公告</el-menu-item>
            </router-link>
            <router-link to="share" tag="span">
              <el-menu-item  index="6-2">分享</el-menu-item>
            </router-link>
            <router-link to="shareward" tag="span">
              <el-menu-item index="6-3">中奖</el-menu-item>
            </router-link>
            <router-link to="welfarecode" tag="span">
              <el-menu-item index="6-4">福利</el-menu-item>
            </router-link>
          </el-submenu>
        </el-menu>
      </div>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>底部栏</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    created () {
      // 在页面刷新时将store保存到sessionStorage里
      window.addEventListener('beforeunload', () => {
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      // 在页面加载时读取sessionStorage
      if (sessionStorage.getItem('store')) {
        this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
      }

    },
    data() {
      return {
        isCollapse: false
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        //同意
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        //拒绝
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }


  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 500px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  /*顶部*/
</style>
